<template>
  <a-modal v-model:visible="visible" title="查看用户" width="700px">
    <!-- 用户列表 -->
    <a-table :columns="columns" :data-source="data" :pagination="false" :scroll="{ y: '50vh' }" rowKey="id" size="small">
      <template #wx="{ record, text }">
        <a-avatar :src="record.avatar_url" style="margin-right: 5px" />
        {{ text ? text : '' }}
      </template>
    </a-table>
    <template #footer>
      <a-button key="cancel" @click="handleCancel">取消</a-button>
      <a-button key="submit" type="primary" @click="handleOk">确定</a-button>
    </template>
  </a-modal>
</template>
<script lang="ts">
import { defineComponent, ref, Ref, watch } from 'vue'
import { get } from '../../utils/request/request'

const columns = [
  {
    title: '微信',
    dataIndex: 'nick_name',
    align: 'center',
    width: '25%',
    ellipsis: true,
    slots: { customRender: 'wx' }
  },
  { title: '姓名', dataIndex: 'name', width: '15%', align: 'center' },
  { title: '班级', dataIndex: 'class_name', width: '20%', align: 'center' },
  { title: '手机号', dataIndex: 'phone', width: '25%', align: 'center' }
]

interface DataItem {
  id: number
  nick_name: string
  name: string
  class_name: string
  phone: string
  app_id: number
  avatar_url: string
  resume_path: string
  paper_count: number
}

const data: Ref<DataItem[]> = ref([])
const data1: Ref<DataItem[]> = ref([])

// modal相关
const useModalEffect = () => {
  const visible = ref<boolean>(false)
  const showModal = () => {
    visible.value = true
  }
  const handleOk = () => {
    visible.value = false
  }
  const handleCancel = () => {
    visible.value = false
  }
  return {
    visible,
    showModal,
    handleOk,
    handleCancel
  }
}

export default defineComponent({
  props: ['id'],
  setup(props) {
    const id = ref<number>(0)
    const token: string = localStorage.getItem('token') as string
    const { visible, showModal, handleOk, handleCancel } = useModalEffect()
    watch(
      () => props.id,
      async (newVal) => {
        if (visible.value) {
          id.value = newVal
          const res: any = await get(`/admin/api/v1/recruitment/${newVal}/users?page=1&size=1000`, token)
          if (res.status_code === 0) {
            if (res.data == null) {
              data.value = data1.value
            }
            const modifiedData = res.data
            modifiedData.forEach((user: any) => {
              if (!user.name) {
                user.name = '/'
                user.class_name = '/'
                user.phone = '/'
              }
            })
            data.value = modifiedData
          }
        }
      }
    )
    return {
      visible,
      showModal,
      handleOk,
      handleCancel,
      data,
      columns
    }
  }
})
</script>
